import PocketBase from "../pocketbase.es.js";
import { _dialog, _treeTable } from "../utils/functions.js";

const pb = new PocketBase("http://127.0.0.1:8090");
const html = String.raw;

export function departmentsTreeRadioList(data = [], pid = "") {
  const arr = data.filter((el) => el.pid === pid);
  if (arr.length === 0) return "";
  return html`
    <ul>
      ${arr
        .map(
          (el) => html`
            <li tree-list-id="${el.id}">
              <input
                class="form-check-input"
                type="radio"
                name="pid"
                value="${el.id}"
              />
              <label class="form-check-label">${el.label}</label>
              ${departmentsTreeRadioList(data, el.id)}
            </li>
          `
        )
        .join("")}
    </ul>
  `;
}

export function renderDepartmentsTable(data = []) {
  return html`
    <table class="table">
      <thead>
        <tr>
          <th>部门</th>
          <th style="width:80px">排序</th>
          <th style="width:240px">操作</th>
        </tr>
      </thead>
      <tbody>
        ${data
          .map(
            (el) => html`
              <tr>
                <td style="padding-left:${el.deep * 2}rem">
                  ▾${el.label}
                  ${el.isDeaf
                    ? `<button
                  data-id="${el.id}"
                  data-action="deleteDepartment"
                  class="btn btn-link btn-sm"
                >
                  删除
                </button>`
                    : ""}
                </td>
                <td>
                  <input
                    style="100%"
                    class="form-control"
                    type="number"
                    value="${el.sort}"
                  />
                </td>
                <td>
                  <button
                    data-id="${el.id}"
                    data-action="addDepartment"
                    class="btn btn-primary btn-sm"
                  >
                    添加子项
                  </button>
                  <button
                    data-id="${el.id}"
                    data-action="editDepartment"
                    class="btn btn-info btn-sm"
                  >
                    编辑
                  </button>
                </td>
              </tr>
            `
          )
          .join("")}
      </tbody>
    </table>
  `;
}

/*  */

/*  */
export async function getDepartmentsList() {
  const records = await pb.collection("departments").getFullList({
    sort: "-sort",
  });
  departmentsList.innerHTML = renderDepartmentsTable(_treeTable(records));
}

export const addDepartmentDialog = _dialog(
  "部门",
  html`
    <form name="addDepartmentForm">
      <input type="text" name="pid" hidden />
      <p>
        <label class="form-label">名称</label>
        <input name="label" type="text" class="form-control" />
      </p>
      <p>
        <label class="form-label">排序</label>
        <input name="sort" type="number" class="form-control" />
      </p>
    </form>
  `,
  html`
    <button data-action="saveAddDepartment" class="btn btn-primary btn-sm">
      确定
    </button>
    <button data-action="cancelAddDepartment" class="btn btn-secondary btn-sm">
      取消
    </button>
  `
);

export const editDepartmentDialog = _dialog(
  "编辑部门",
  html`
    <form name="editDepartmentForm">
      <input type="text" name="id" hidden />
      <p>
        <label class="form-label">名称</label>
        <input name="label" type="text" class="form-control" />
      </p>

      <p>
        <label class="form-label">排序</label>
        <input name="sort" type="number" class="form-control" />
      </p>

      <div>
        <label class="form-label">上级选项</label>

        <p>
          <input class="form-check-input" type="radio" name="pid" value="0" />
          <label class="form-check-label">顶级选项</label>
        </p>
        <div id="pidRadioList"></div>
      </div>
    </form>
  `,
  html`
    <button data-action="saveEditDepartment" class="btn btn-primary btn-sm">
      确定
    </button>
    <button data-action="cancelEditDepartment" class="btn btn-secondary btn-sm">
      取消
    </button>
  `
);
